<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>一天学习一个 npm 轮子，十天后变成轮子哥💪</title>
  <style>
    body {
      display: flex;
      align-items: center;
      margin: 0 auto;
      max-width: 1000px;
      color: white;
      font-size: 16px;
      line-height: 1.5;
      word-wrap: break-word;
      background: #21262d;
    }
    article {
      padding: 16px 32px;
      background: #0e1219;
    }
    h1 {
      font-size: 2em;
      padding-bottom: .3em;
      border-bottom: 1px solid #33404b;
      margin-bottom: 16px;
      font-weight: 600;
      line-height: 1.25;
    }
    h2 {
      font-size: 1.5em;
      padding-bottom: .3em;
      border-bottom: 1px solid #33404b;
      margin-top: 24px;
      margin-bottom: 16px;
      font-weight: 600;
      line-height: 1.25;
    }
    p {
      margin-top: 0;
      margin-bottom: 16px;
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
    }
    ul {
      margin-top: 0;
      list-style-type: disc;
      padding-left: 2em;
    }
    li {
      display: list-item;
      text-align: -webkit-match-parent;
    }
    a {
      color: rgb(88, 166, 255);
      text-decoration: none;
    }
  </style>
</head>
<body>

<article>
  <h1>《一天学习一个 npm 轮子，十天后变成轮子哥》💪</h1>

  <h2>作者 👻</h2>

  <a target="_blank" href="https://yanhaixiang.com">@海怪</a>

  <h2>重要 ⚠️</h2>
  <img src="https://camo.githubusercontent.com/b14fafad28ec740feae091ab006cbf00a64a1aa0b6f87e06218ca5f66a2a5165/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f4861697869616e67363132332f6f6e652d6461792d6f6e652d6e706d2d6c69623f7374796c653d666c61742d737175617265" alt="shield">
  <p>点右上角的 Star 🌟 以快速收藏 :)</p>

  <h2>简介 🧐</h2>
  <p>
    这本小书会带你造 10 个非常实用的 npm 库 📦
  </p>
  <p>
    本质上其实是想带大家一起学习 10 个库的源码，不过这与市面那些一上来直接开干源码的文章有的不同：每篇文章里的对每个轮子都会从简单的需求开始，首先做一个最 Low 的解决方法出来，然后慢慢优化它，最后推导成源码的样子。整个从 0 到 1 的设计与思考过程会完整地呈现给读者。
  </p>

  <h2>期望 🤩</h2>
  <p>
    教大家造轮子只是最浅层的目的，其实并不希望大家看完每篇文章能把所有优化的步骤都记住，这很反人性也不现实，而是希望大家读完后可以有 “这样的轮子我也能自己写一个” 的勇气，这样的勇气和想法是这本小书最想带给大家的。
  </p>
  <p>授人以鱼不如授人以渔.</p>

  <h2>目录 💼</h2>

  <ul>
    <li>
      <a target="_blank" href="https://github.com/Haixiang6123/my-react-error-bounday">造一个 react-error-boundary 轮子</a>
    </li>
    <li>
      <a target="_blank" href="https://github.com/Haixiang6123/my-idb-keyval">造一个 idb-keyval 轮子</a>
    </li>
    <li>
      <a target="_blank" href="https://github.com/Haixiang6123/my-js-cookie">造一个 js-cookie 轮子</a>
    </li>
    <li>
      <a target="_blank" href="https://github.com/Haixiang6123/my-copy-to-clipboard">造一个 copy-to-clipboard 轮子</a>
    </li>
    <li>
      <a target="_blank" href="https://github.com/Haixiang6123/my-react-infinite-scroller">造一个 react-infinite-scroller 轮子</a>
    </li>
    <li>
      <a target="_blank" href="https://github.com/Haixiang6123/my-react-contenteditable">造一个 react-contenteditable 轮子</a>
    </li>
    <li>
      <a target="_blank" href="https://github.com/Haixiang6123/my-promise-poller">造一个 promise-poller 轮子</a>
    </li>
    <li>
      <a target="_blank" href="https://github.com/Haixiang6123/my-redux">造一个 redux 轮子</a>
    </li>
    <li>
      <a target="_blank" href="https://github.com/Haixiang6123/my-redux-thunk">造一个 redux-thunk 轮子</a>
    </li>
    <li>
      <a target="_blank" href="https://github.com/Haixiang6123/my-supertest">造一个 supertest 轮子</a>
    </li>
  </ul>

</article>
</body>
</html>